{% extends "main.html" %}
{% block head_js %}
<script src="{{ static_url('echarts/2-2-3/build/dist/echarts.js')}}"></script>
{% end %}

{% block bodyy %}
    <div id="main" style="height:400px;"></div>
     <h3 class="sub-header"></h3>

     <div id="liuliang" style="height:400px;"></div>
    <h2 class="sub-header"></h2>

<div id="line" style="height:400px;"></div>
    <h2 class="sub-header"></h2>

<div id="bar" style="height:400px;"></div>
    <h2 class="sub-header"></h2>

<div id="lachang" style="height:400px;"></div>
    <h2 class="sub-header"></h2>
<!--div id="mod" style="height:400px;"></div-->

  <script type="text/javascript">
        require.config({
            paths: {
                echarts: "static/echarts/2-2-7/build/dist"
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'

            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                option = {
                title : {
        text: '界面不可交差重叠',
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};


                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: "static/echarts/2-2-7/build/dist"
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'

            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('liuliang'));
                option = {
    title : {
        text: '界面可以交差重叠',
        subtext: '界面可以交差重叠'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['意向','预购','成交']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};




                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: "static/echarts/2-2-7/build/dist"
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar',
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myline = ec.init(document.getElementById('line'));
                //--------line-------------------------//
                myline.setOption({
        title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'line',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'line',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
});

            //---------------------------bar分割--------------------------------------//
            var mybar = ec.init(document.getElementById('bar'));
                    mybar.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                               {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                             ]
                        },
                       markLine : {
                            data : [
                            {type : 'average', name: '平均值'}
                             ]
                       }
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            //---------------------------lacahng分割--------------------------------------//
            var mychang = ec.init(document.getElementById('lachang'));
                    mychang.setOption({
                    title : {
                     text: '模板',
                     subtext: '不要移除'
               },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']   //必须和下面的series/name设置的一致
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                //添加X下拉工具条方式1
                dataZoom : {
                    show : true,
                    realtime : true,
                    start : 60,
                    end : 100
                },
                //添加X下拉工具条方式2
                //dataZoom : {
                 //   show : true,
                 //   realtime : true,
                 //   start : 0,
                 //   end : 100
                //},
                xAxis : [
                    {
                        type : 'category',
                        //x的数据
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'line', //设置默认line图展示
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                               {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                             ]
                        },
                       markLine : {
                            data : [
                            {type : 'average', name: '平均值'}
                             ]
                       }
                    },
                    {
                        name:'降水量',
                        type:'line',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
                // 为echarts对象加载数据
                //myline.setOption(option);
                //mybar.setOption(option);
            }
        );
   </script>

<!--h2>模板</h2-->
<!--script type="text/javascript">
        require.config({
            paths: {
                echarts: "static/echarts/2-2-7/build/dist"
            }
        });
        //一下是动态加载所需模块
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                //可以定义多个mymod1,2,3
                var mymod = ec.init(document.getElementById('mod'));
                //可以设置多个mymode.setoption即可
                mymod.setOption({
                    title : {
                     text: '模板',
                     subtext: '不要移除'
               },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']   //必须和下面的series/name设置的一致
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                //添加X下拉工具条方式1
                dataZoom : {
                    show : true,
                    realtime : true,
                    start : 60,
                    end : 100
                },
                //添加X下拉工具条方式2
                //dataZoom : {
                 //   show : true,
                 //   realtime : true,
                 //   start : 0,
                 //   end : 100
                //},
                xAxis : [
                    {
                        type : 'category',
                        //x的数据
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'line', //设置默认line图展示
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                               {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                             ]
                        },
                       markLine : {
                            data : [
                            {type : 'average', name: '平均值'}
                             ]
                       }
                    },
                    {
                        name:'降水量',
                        type:'line',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
                // 为echarts对象加载数据
                //myChart.setOption(option);
            }
        );
   </script-->
{% end %}
